<template>
  <div :id="'market-header-' + bg">
<!--    :id="bg === 'lao' ? 'market-header-l' : 'market-header-y'"-->
    <div class="header">
      <p class="header-title">Neuqsoft<span>云市场</span></p>
      <div class="header-right">
        <div class="right-menu">
          <span @click="routerGo('/')">首页</span>
          <span>平台产品</span>
          <span>费用中心</span>
          <span>管理中心</span>
          <span>服务与支持</span>
        </div>
        <div v-if="userName" class="right-menu-action">{{ userName }}</div>
        <div v-else class="right-menu-action">
          <p style="font-size: 12px;">登录</p>
          <div style="background: #fff;margin-left: 20px;">
            <p style="padding: 2px 10px;color: #1D34CF;font-size: 12px;">
              注册
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="header-content">
      <div class="content-title">
        <p>{{ content.title }}</p>
        <p>{{ content.subTitle }}</p>
      </div>
      <div v-if="!sign" @click="purchase" class="header-button">
        <p>联系购买</p>
      </div>
    </div>
  </div>
</template>

<script>
import { storage } from "../plugins/storage";
export default {
  components: {},
  props: ["content", "sign", "bg"],
  created() {
    this.initData();
  },
  data() {
    return {
      userName: ""
    };
  },
  methods: {
    initData() {
      if (
        JSON.stringify(storage.get("userInfo")) !== "{}" &&
        storage.get("userInfo").userId
      ) {
        this.userName = storage.get("userInfo").userName;
      }
    },
    purchase() {
      sessionStorage.setItem("purchaseUrl", location.href)
      setTimeout(() => {
        this.$router.push("/service/platform");
      }, 1000);
    },
    routerGo(data) {
      this.$router.push(data);
    }
  }
};
</script>

<style lang="less" scoped>
#market-header-lao {
  position: relative;
  width: 100%;
  /*background: #2337ba;*/
  height: 450px;
  background-image: url("../assets/img/market/lao_bg.png");
  background-size: 100% 100%;
}
#market-header-yun {
  position: relative;
  width: 100%;
  /*background: #2337ba;*/
  height: 450px;
  background-image: url("../assets/img/market/yun_bg.png");
  background-size: 100% 100%;
}
#market-header-zxgt {
  position: relative;
  width: 100%;
  height: 450px;
  background-image: url("../assets/img/market/zxgt_bg.png");
  background-size: 100% 100%;
}
.header {
  width: 85%;
  padding: 10px 0;
  z-index: 3;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-title {
    color: #fff;
    font-size: 20px;
    font-family: AlibabaPuHuiTiM;
    font-weight: 700;
    span {
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      font-weight: 400;
      padding-left: 8px;
      letter-spacing: 1px;
    }
  }
  .header-right {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .right-menu {
      margin-right: 64px;
      span {
        cursor: pointer;
        font-size: 14px;
        font-family: AlibabaPuHuiTiR;
        color: #fff;
        padding-left: 15px;
      }
    }
    .right-menu-action {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 14px;
    }
  }
}
.header-content {
  width: 72%;
  margin: 0 auto;
  z-index: 3;
  padding-bottom: 80px;
  .content-title {
    padding: 100px 0 60px 0;
    p:nth-child(1) {
      padding: 8px 0;
      font-family: AlibabaPuHuiTiM;
      color: #fff;
      font-size: 32px;
    }
    p:nth-child(2) {
      padding: 8px 0;
      color: #6c7ce7;
      font-style: italic;
      font-size: 16px;
      font-weight: 600;
      font-family: AlibabaSans;
    }
  }
  .header-button {
    background: #FFBA11;
    width: 160px;
    text-align: center;
    cursor: pointer;
    p {
      padding: 18px 0;
      color: #1e1e1e;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
